<template>
	<view>
		<view class="top-wrap">
			<view class="top-tab yf-flex-left">
				<view class="tab-item yf-flex-center" :class="currentTab==index?'active':''" v-for="(item,index) in 2"
					:key="index" @click="currentTab=index">
					{{index==0?'打卡情况':'审批情况'}}
				</view>
			</view>
			<view v-show="currentTab==0">
				<view class="search-wrap yf-flex-left" style="padding-bottom: 0;">
					<view class="search-input-wrap yf-flex-left">
						<input type="text" placeholder="请输入外出人员姓名" class="search-input"
							:value="currentTab==0?inputValue0:inputValue1" @confirm="onSearch" confirm-type="search"
							@input="onKeyInput" />
					</view>
				</view>
				<view class="search-wrap yf-flex-left">
					<view class="choosedept yf-flex-left">
						<picker @change="bindPickerChange" range-key="name" :value="index" :range="deptList"
							class="choosedept-text" :style="{color:deptName!=''?'#101010':''}">
							{{deptName||"请选择部门"}}
						</picker>
						<tui-icon name="arrowdown" size="20" color="#888"></tui-icon>
					</view>
					<view class="fn-wrap yf-flex-left" @click="jumpTo('mapView')">
						<image src="/static/common/look_map.png" mode="" class="fn-map"></image>
						查看地图
					</view>
				</view>
				<view class="search-wrap yf-flex-left" style="padding: 0 30rpx 20rpx;">
					<view class="date-wrap yf-flex-left">
						<image src="/static/common/date_icon.png" mode="" class="date-icon"></image>
						<picker mode="date" class="date-item yf-flex-center" :value="startTimeString" :start="startDate"
							:end="endDate" @change="bindDateChange(1,$event)">
							<view class="date-text" :style="{color:startTimeString!=''?'#101010':''}">
								{{startTimeString||'年/月/日'}}
							</view>
						</picker>
						<view class="date-hint">
							至
						</view>
						<picker mode="date" class="date-item yf-flex-center" :value="endTimeString" :start="startDate"
							:end="endDate" @change="bindDateChange(2,$event)">
							<view class="date-text" :style="{color:endTimeString!=''?'#101010':''}">
								{{endTimeString||'年/月/日'}}
							</view>
						</picker>
					</view>
					<image src="/static/common/search_icon2.png" mode="" class="fn-icon" @click="onSearch"></image>
					<image src="/static/common/reset_icon.png" mode="" class="fn-icon" @click="resetList"></image>
				</view>
			</view>
			<view class="search-wrap yf-flex-left" v-show="currentTab==1">
				<view class="search-input-wrap yf-flex-left">
					<input type="text" placeholder="请输入外出人员姓名" class="search-input"
						:value="currentTab==0?inputValue0:inputValue1" @confirm="onSearch" confirm-type="search"
						@input="onKeyInput" />
					<image src="/static/common/search_icon.png" mode="" class="search-img" @click="onSearch"></image>
				</view>
				<view class="fn-wrap yf-flex-left" @click="show=true">
					筛选状态
					<tui-icon name="arrowdown" size="20" color="#3291F8"></tui-icon>
				</view>
				<tui-bubble-popup :show="show" maskBgColor="rgba(0, 0, 0, 0)" :mask="true" backgroundColor="#fff"
					color="#000" position="absolute" @close="show=false" width="200rpx" right="30rpx" top="180rpx"
					borderWidth="0">
					<view class="tui-menu-item" :class="[status===''?'tui-menu-item-activity':'']" @click="screen('')">
						全部
					</view>
					<view class="tui-menu-item" :class="[status===0?'tui-menu-item-activity':'']" @click="screen(0)">待审核
					</view>
					<view class="tui-menu-item" :class="[status===1?'tui-menu-item-activity':'']" @click="screen(1)">已通过
					</view>
					<view class="tui-menu-item" :class="[status===2?'tui-menu-item-activity':'']" @click="screen(2)">未通过
					</view>
				</tui-bubble-popup>
			</view>
		</view>
		<!-- 列表 -->
		<view class="content-wrap" :style="{'paddingTop':currentTab==0?'380rpx':'210rpx'}">
			<view v-show="currentTab==0">
				<listPage :i="0" :index="currentTab" ref="page1"></listPage>
			</view>
			<view v-show="currentTab==1">
				<listPage :i="1" :index="currentTab" ref="page2"></listPage>
			</view>
		</view>
		<tui-tabbar :tabBar="tabBar" :current="current" @click="tabbarSwitch" color="#9B9B9B" selectedColor="#3291F8"
			iconSize="48">
		</tui-tabbar>
	</view>
</template>

<script>
	import {
		mapGetters
	} from 'vuex'
	import listPage from "./components/listPage"
	export default {
		components: {
			listPage
		},
		data() { 
			return {
				current: 1,
				currentTab: 0, //选项卡下标
				show: false, //显示气泡
				status: "", //状态筛选
				inputValue0: "", //搜索内容
				inputValue1: "", //搜索内容
				deptList: [], //部门列表
				startTimeString: "", //开始时间
				endTimeString: "", //结束时间
				deptName: "", //部门名称
				deptId: "", //部门id
				index: "", //部门下标
				formData:{},//打卡历史筛选参数
			};
		},
		computed: {
			...mapGetters(['tabBar']),
			startDate() {
				return this.getDate('start');
			},
			endDate() {
				return this.getDate();
			}
		},
		onLoad() { 
			// 获取部门列表
			this.getDeptList();
			uni.$on('updateList', (e) => {
				this.$refs.page2.onPullDownRefreshList()
			})
		},
		onUnload() {
			uni.$off('updateList')
		},
		// 刷新
		async onPullDownRefresh() {
			await this.onSearch()
			await uni.stopPullDownRefresh();
		},
		onReachBottom: function() {
			//触底开始下一页
			const that = this; 
			if (that.currentTab == 0) { //打卡列表 
				that.$refs.page1.onReachBottomList(this.formData)
			}
		},
		methods: {
			// 部门选择
			bindPickerChange: function(e) {
				console.log('picker发送选择改变，携带值为', e.detail.value)
				this.index = e.detail.value
				this.deptId = this.deptList[e.detail.value].id
				this.deptName = this.deptList[e.detail.value].name
			},
			// 选择日期
			bindDateChange: function(type, e) {
				if (type == 1) { //开始时间
					if (new Date(this.endTimeString).getTime() < new Date(e.detail.value).getTime()) {
						this.$api.msg("开始时间不能大于结束时间")
						return
					} else {
						this.startTimeString = e.detail.value
					}
				} else {
					if (new Date(e.detail.value).getTime() < new Date(this.startTimeString).getTime()) {
						this.$api.msg("结束时间不能小于开始时间")
						return
					} else {
						this.endTimeString = e.detail.value
					}
				}
			},
			// 获取时间
			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();

				if (type === 'start') {
					year = year - 60;
				} else if (type === 'end') {
					year = year + 2;
				}
				month = month > 9 ? month : '0' + month;
				day = day > 9 ? day : '0' + day;
				return `${year}-${month}-${day}`;
			},
			// 部门列表
			getDeptList() {
				this.$apis.deptList().then((res) => {
					console.log(res, '@@@@@@@@')
					if (res.code == 0) {
						this.deptList = res.data
					}
				})
			},
			// 跳转
			jumpTo(url, param) {
				this.$Router.navigateTo(url, param)
			},
			// 筛选
			screen(status) {
				this.show = false;
				this.status = status;
				this.$nextTick(() => {
					this.$refs.page2.onPullDownRefreshList()
				})
			},
			//搜索内容
			onKeyInput: function(event) {
				if (this.currentTab == 0) {
					this.inputValue0 = event.target.value.replace(/^\s+|\s+$/g, '');
				}
				if (this.currentTab == 1) {
					this.inputValue1 = event.target.value.replace(/^\s+|\s+$/g, '');
				}
			},
			//搜索
			onSearch() {
				const that = this; 
				if (that.currentTab == 0) { //打卡列表
					this.formData.userName = that.inputValue0
					if (that.deptId !== "") {
						this.formData.deptId = that.deptId;
					}
					if (that.startTimeString !== "") {
						this.formData.startTimeString = that.startTimeString;
					}
					if (that.endTimeString !== "") {
						this.formData.endTimeString = that.endTimeString;
					}
					that.$refs.page1.searchList(this.formData)
				}
				if (that.currentTab == 1) { //审批列表
					let params = {}
					if (that.inputValue1) {
						params.userName = that.inputValue1
					}
					if (that.status !== "") {
						params.status = that.status;
					}
					that.$refs.page2.searchList(params)
				}
			},
			// 重置
			resetList() {
				let that=this;
				that.inputValue0 = ""
				that.deptId = ""
				that.startTimeString = ""
				that.endTimeString = "" 
				that.deptName = "" 
				that.index = ""  
				that.formData={}
				that.$refs.page1.searchList();
			},
			tabbarSwitch(e) {
				console.log(e);
				console.log(e.index);
				if (e.index == this.current) return
				if (e.index == 0) {
					this.$Router.switchTab('tabBar-index');
				}else if(e.index == 2) {
					this.$Router.switchTab('tabBar-user');
				}
			},
		}
	}
</script>

<style lang="scss">
	page {
		background: #F4F8FB;
		padding-bottom: constant(safe-area-inset-bottom);
		/*兼容iphone底部虚拟键*/
		padding-bottom: env(safe-area-inset-bottom);
		overflow-x: hidden;
	}
	.tui-text-scale {
		font-size: 38rpx !important;
	}
	.top-wrap {
		position: fixed;
		top: 0;
		left: 0;
		z-index: 10;
		width: 100%;

		.top-tab {
			background: #fff;

			.tab-item {
				flex: 1;
				height: 80rpx;
				color: #757575;
				font-size: 12+28rpx;
				border-bottom: 4rpx solid #fff;
			}

			.active {
				color: #3291F8;
				border-bottom: 4rpx solid #3291F8;
			}
		}

		.search-wrap {
			width: 100%;
			padding: 18rpx 30rpx;
			background: #F4F8FB;

			.search-input-wrap {
				flex: 1;
				height: 70rpx;
				padding: 0 20rpx;
				border-radius: 40rpx;
				border: 1rpx solid #bbb;

				.search-input {
					flex: 1;
					font-size: 10+24rpx;
					color: #888;
				}

				.search-img {
					width: 35rpx;
					height: 35rpx;
					margin-left: 20rpx;
				}
			}

			.date-wrap {
				flex: 1;
				height: 70rpx;
				padding: 0 20rpx;
				border-radius: 40rpx;
				border: 1rpx solid #bbb;

				.date-icon {
					width: 35rpx;
					height: 35rpx;
				}

				.date-hint {
					font-size: 12+24rpx;
				}

				.date-item {
					flex: 1;

					.date-text {
						font-size: 12+24rpx;
						color: #A1A1A1;
					}
				}
			}

			.fn-icon {
				width: 66rpx;
				height: 66rpx;
				margin-left: 10rpx;
			}

			.fn-wrap {
				color: #3291F8;
				margin-left: 20rpx;
				font-size: 10+24rpx;
				.fn-map {
					width: 40rpx;
					height: 40rpx;
					margin-right: 5rpx;
				}
			}

			.choosedept {
				width: 70%;
				height: 70rpx;
				border: 1rpx solid #bbb;
				border-radius: 40rpx;
				padding: 0 20rpx;
				justify-content: space-between;
				.choosedept-text {
					font-size: 10+24rpx;
					color: #A1A1A1;
				}
			}

			.tui-menu-item {
				font-size: 12+26rpx;
				padding: 10rpx 20rpx;
			}

			.tui-menu-item-activity {
				color: #fff;
				background: #3291F8;
			}
		}
	}

	.content-wrap {
		width: 100%;
		padding: 210rpx 30rpx 120rpx;
	}
</style>